<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            width: 100%;
            height: 600px;
        }
        p {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #00B7FF;
            overflow: scroll;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        span {
            margin: 100px;

        }
        aside {
            position: fixed;
            top: 10px;
            left: 10px;
            border: 1px solid #ff1c06;
            width: fit-content;
            height: fit-content;
        }
    </style>
</head>
<body>
<aside></aside>
<p>
    <span>
    .scrollLeft()
    所属分类：CSS | 偏移 | DOM 操作 > CSS 属性 英文文档：.scrollLeft()
    获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。
    Contents:
    .scrollLeft()
    .scrollLeft()
    .scrollLeft( value )
    .scrollLeft( value )
    .scrollLeft()返回: Integer
    描述: 获取匹配的元素集合中第一个元素的当前水平滚动条的位置。

    添加的版本: 1.2.6.scrollLeft()
    这个方法不接受任何参数。
    滚动条水平滚动位置是和滚动区隐藏区域的左侧宽度像素值是相同的。如果滚动条是在最左边，或者这个元素没有可滚动的，那么这个数字是0。

    注意:.scrollLeft(), 当直接调用或使用.animate()做动画，当元素被应用了隐藏，将不做任何改变。
    </span>
</p>
<script src="jquery-1.12.4.js"></script>
<script>
    $("body").on("click", function () {
        $("aside").append("<div>" + $("p").scrollLeft() + "\n" + $("p").scrollTop() + "</div>");
    })
</script>
</body>
</html>